<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/1.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/2.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/3.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/4.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/5.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/6.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/7.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/8.jpg" alt="">
    <img src="./懒加载的img库/laod.gif" data-src="./懒加载的img库/9.jpg" alt="">
    <script>
        let num = document.getElementsByTagName("img").length; //9
        let img = document.getElementsByTagName("img")
        let n = 0
        console.log(num, img)
        lazyload();
        window.onscroll = lazyload;

        function lazyload() {
            let seeHeight = document.documentElement.clientHeight; // 可见区域
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条的距离

            for (let i = n; i < num; i++) {
                if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute("src") == "./懒加载的img库/laod.gif") {
                        img[i].src = img[i].getAttribute("data-src")
                    }
                    n = i + 1
                }
            }
        }
    </script>
</body>

</html>